<template>
  <view class="page">
    <view class="header">
      <!--			背景图片-->
      <image class="background" :src="getShowNginxPicUrl('adXzHT88D0JrUhF8d006.png')"></image>
      <view class="btn-list">
        <!--				自习室按钮-->
        <view class="btn-item" @click="() => $uni.redirectTo({ url: '/studyRoom/pages/studyRoomList/index' })">
          <view class="icon-container">
            <image class="icon" :src="studyRoomIcon"></image>
          </view>
          <view class="text">自习室</view>
        </view>
        <!--				我的按钮-->
        <view class="btn-item" @click="() => $uni.reLaunch({ url: '/pages/mine/mine' })">
          <view class="icon-container">
            <image class="icon" :src="mineIcon"></image>
          </view>
          <view class="text">我的</view>
        </view>
      </view>
    </view>
    <view class="content">
      <!--			背单词 / 刷真题 / 开放自习室-->
      <view class="ranking-type-choice">
        <view class="list">
          <view
            class="item"
            v-for="item in rankTypeChoiceList"
            :key="item.value"
            :class="{ active: item.value === currentSelectedRankType }"
            @click="
              () => {
                currentSelectedRankType = item.value
                resetPaginationAndReloadData()
                getUserRankInfo()
              }
            "
            >{{ item.label }}</view
          >
        </view>
        <!--				更多活动-->
        <view class="more-icon-container" v-if="activityRankingList.length > 0">
          <!--					按钮-->
          <image class="more-icon" @click="showMorePopup = true" :src="plusIcon"></image>
          <!--					弹窗-->
          <view class="more-popup" v-show="showMorePopup">
            <view class="mask" @click.stop="showMorePopup = false"></view>
            <view class="content">
              <view
                class="item"
                v-for="item in activityRankingList"
                :key="item.rankingListId"
                @click="
                  () =>
                    $uni.navigateTo({
                      url: handleUrlParams('/studyRoom/pages/rank/activityRank/index', { studyActivityId: item.studyActivityId }),
                    })
                "
                >{{ item.rankingListName }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <!--			周榜 / 月榜 / 总榜-->
      <view class="search-type-choice">
        <view
          class="item"
          v-for="item in searchTypeChoiceList"
          :key="item.value"
          :class="{ active: item.value === currentSelectedSearchType }"
          @click="
            () => {
              currentSelectedSearchType = item.value
              resetPaginationAndReloadData()
              getUserRankInfo()
            }
          "
          >{{ item.label }}</view
        >
      </view>
      <view class="rank-list">
        <view class="table-header column">
          <view class="item column-item-1 column-item">排名</view>
          <view class="item column-item-2 column-item">用户</view>
          <view class="item column-item-3 column-item" style="color: #a75b07">累计学习时长</view>
        </view>

        <rank-item v-if="currentUserRankInfo" :item="currentUserRankInfo" primary :rank-index="currentUserRankInfo.userRank"></rank-item>

        <rank-item v-for="(item, index) in rankRecordList" :key="item.userId" :item="item" :rank-index="index + 1"></rank-item>

        <template v-if="rankRecordList.length > 0">
          <uni-load-more :status="loadMoreStatusText"></uni-load-more>
        </template>
        <empty v-else height="900rpx"></empty>
      </view>
    </view>
    <!--		前往自习室 banner-->
    <view class="go-to-study-room-banner" @click="() => $uni.navigateTo({ url: '/studyRoom/pages/studyRoomList/index' })">
      <image :src="getShowNginxPicUrl('c15tcfdq9DVytqCNTZzx.png')" class="background"></image>
    </view>
  </view>
</template>

<script>
import mineIcon from "./assets/mine.png"
import studyRoomIcon from "./assets/studyRoom.png"
import moreIcon from "./assets/more.svg"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"
import dateUtils from "@/utils/dateUtils"
import empty from "@/components/empty.vue"
import rankItem from "./components/rankItem.vue"
import { getShowNginxPicUrl } from "@/utils/settings"
import TopicList from "@/mine/pages/wrongTopicList/topicList.vue"
import plusIcon from "./assets/plus.png"

export default {
  components: {
    TopicList,
    rankItem,
    uniLoadMore,
    empty,
  },
  data() {
    return {
      mineIcon,
      studyRoomIcon,
      moreIcon,
			plusIcon,
      showMorePopup: false,
      rankTypeChoiceList: [
        {
          label: "背单词",
          value: "word",
        },
        {
          label: "刷真题",
          value: "question",
        },
        {
          label: "自习室",
          value: "self_study",
        },
      ],
      currentSelectedRankType: "self_study",
      searchTypeChoiceList: [
        {
          label: "周榜",
          value: "week",
        },
        {
          label: "月榜",
          value: "month",
        },
        {
          label: "总榜",
          value: "all",
        },
      ],
      currentSelectedSearchType: "all",
      pagination: {
        current: 1,
        size: 15,
      },
      loadMoreStatusText: "more",
      rankRecordList: [],
      //活动排行榜
      activityRankingList: [],
      currentUserRankInfo: null,
    }
  },
  onLoad() {
    this.resetPaginationAndReloadData()
    //获取活动排行榜的活动列表
    request({
      url: "studyRankingList/getStudyRankingList",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityRankingList = data
    })
    this.getUserRankInfo()
  },
  methods: {
    getShowNginxPicUrl,
    handleUrlParams,
    getShowImage,
    //获取排行榜数据
    getRankRecordList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        request({
          url: "statistics/wordsDurationRanking",
          data: {
            rankingType: this.currentSelectedRankType,
            searchType: this.currentSelectedSearchType,
            current: this.pagination.current,
            size: this.pagination.size,
          },
          errorHandle: true,
        }).then((data) => {
          //格式化时间
          for (let record of data.records) {
            record.duration = dateUtils.formatTimeObject2(record.duration)
          }
          this.rankRecordList.push(...data.records)
          if (this.rankRecordList.length >= data.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //重置分页并重新加载数据
    resetPaginationAndReloadData() {
      this.pagination.current = 1
      this.rankRecordList = []
      uni.showLoading({ title: "加载中" })
      this.getRankRecordList().finally(() => {
        uni.hideLoading()
      })
    },
    //获取用户当前的排行榜信息
    getUserRankInfo() {
      request({
        url: "statistics/getCurrentStatistical",
        data: {
          searchType: this.currentSelectedSearchType,
          rankingType: this.currentSelectedRankType,
        },
        showLoading: true,
      })
        .then((data) => {
          //格式化时间
          data.duration = dateUtils.formatTimeObject2(data.duration)
          this.currentUserRankInfo = data
        })
        .catch((err) => {
          console.log(err, "err")
        })
    },
  },
  //页面拉到底部加载下一页
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getRankRecordList()
  },
}
</script>

<style scoped lang="scss">
@import "./common";

.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding: {
    bottom: env(safe-area-inset-bottom);
  }
  > .header {
    position: relative;
    height: 315rpx;
    > .background {
      width: 100%;
      height: 100%;
    }
    > .btn-list {
      position: absolute;
      display: flex;
      top: 0;
      right: 28rpx;
      z-index: 2;
      > .btn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 24rpx;
        > .icon-container {
          width: 100rpx;
          height: 100rpx;
          > .icon {
            width: 100%;
            height: 100%;
          }
        }
        > .text {
          font-size: 30rpx;
        }
      }
    }
  }
  > .content {
    background: var(--background-color);
    border-radius: 30px 30px 0 0;
    padding: 40rpx 30rpx;
    min-height: calc(100vh - 198rpx);
    transform: translateY(-110rpx);
    > .ranking-type-choice {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > .list {
        display: flex;
        > .item {
          &:not(:first-child) {
            margin-left: 40rpx;
          }
          padding-bottom: 6rpx;
          font-size: 32rpx;
          &.active {
            color: #2cb980;
          }
          position: relative;
          &.active::after {
            content: "";
            position: absolute;
            left: 50%;
            width: 60rpx;
            transform: translateX(-50%);
            bottom: -6rpx;
            height: 6rpx;
            background: #ffd658;
          }
        }
      }
      > .more-icon-container {
        width: 50rpx;
        height: 50rpx;
        position: relative;
        .more-icon {
          width: 100%;
          height: 100%;
        }
        .more-popup {
          .mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
          .content {
            position: absolute;
            z-index: 9999;
            top: calc(100% + 20rpx);
            right: 0;
            background: var(--background-color);
            border-radius: 10rpx;
            box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
            max-height: 800rpx;
            overflow-y: auto;
            .item {
              width: 400rpx;
              text-align: center;
              padding: 20rpx 0;
              font-size: 32rpx;
              font-weight: bold;
              //文本溢出自动加省略号
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .search-type-choice {
      display: flex;
      margin-top: 30rpx;
      border: 2rpx solid #2CB980;
      border-radius: 10rpx;
      .item {
        width: 0;
        flex: 1;
        padding: 8rpx 0;
        font-size: 32rpx;
        color: #2CB980;
        text-align: center;
        &:not(:first-child) {
          border-left: 2rpx solid #2CB980;
        }
        &.active {
          background: #2CB980;
          color: var(--text-color-white);
        }
      }
    }
    .rank-list {
      margin-top: 30rpx;
      .table-header {
        .item {
          font-size: 32rpx;
          color: #666060;
        }
      }
    }
  }
  > .go-to-study-room-banner {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: {
      left: 10rpx;
      right: 10rpx;
      bottom: env(safe-area-inset-bottom);
    }
    > .background {
      height: 136rpx;
      width: 100%;
    }
  }
}
</style>
